<script setup lang='ts'>
import { ref, reactive } from 'vue'
import DeviceTypeTable from './ui/DeviceTypeTable.vue'
import { ElMessage } from 'element-plus'
import {
  addDeviceType,
  editDeviceType
} from '@/api/http'
// 定义变量
// refs
const deviceTypeTableRef = ref()

// 弹框
const fromVisible = ref(false)

// 弹框表单
const formData = reactive({
  name: '',
  shortName: '',
  code: '',
  portNmae: '',
  isAvailable: '',
  desc: ''
})

// 是否未编辑
const isUpdate = ref(false)

// 选中的修改项
let updateItem: any = reactive({})

// 表单验证
const validPassword = (rule, value, callback) => {
  // 匹配字符串格式：字母大小写  数字  下划线 横线 正反斜线
  let reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_ /\\//\-/\\]+$/
  if (!reg.test(value)) {
    callback(new Error('编号格式不正确，含有特殊字符!'))
  }
}

// 表单验证
const rules = reactive({
  name: [ { required: true, message: '名称不能为空' } ],
  code: [
    { required: true, message: '编号不能为空' },
    { validator: validPassword, trigger: 'blur' }
  ],
  harborCode: [
    {
      type: 'date',
      required: true,
      message: '请选择港口',
      trigger: 'change'
    }
  ],
  companyCode: [
    {
      type: 'date',
      required: true,
      message: '请选择公司',
      trigger: 'change'
    }
  ],
  barWheelMachineCode: [
    {
      type: 'date',
      required: true,
      message: '请选择堆取料机',
      trigger: 'change'
    }
  ],
  deviceCode: [
    {
      type: 'date',
      required: true,
      message: '请选择设备',
      trigger: 'change'
    }
  ]
})

// 定义函数
const showDialog = (num: number,row?:any) => {
  if (num) {
    isUpdate.value = true
    updateItem = {}
    updateItem = { ...row }
    formData.name = updateItem.name
    formData.code = updateItem.code
    formData.portNmae = updateItem.portNmae
    formData.isAvailable = updateItem.isAvailable
    formData.desc = updateItem.desc
    console.log('修改项------->', updateItem)
  } else {
    isUpdate.value = false
  }
  fromVisible.value = true
}

// 确定
const determine = () => {
  if(isUpdate.value) {
    updateDeviceInfo()
  } else {
    addDeviceTypes()
  }
}

// 新增设备类型
const addDeviceTypes = async () => {
  let res = await addDeviceType(formData)
  if(res.success) {
    ElMessage({
      type: 'success',
      message: '添加成功!'
    })
    deviceTypeTableRef.value.getDeviceListData()
    fromVisible.value = false
  } else {
    ElMessage({
      type: 'error',
      message: '添加失败!'
    })
  }
}
// 修改设备类型
const updateDeviceInfo = async () => {
  let res = await editDeviceType(formData)
  if (res.success) {
    ElMessage({
      type: 'success',
      message: '修改成功!'
    })
    deviceTypeTableRef.value.getDeviceListData()
    fromVisible.value = false
  } else {
    ElMessage({
      type: 'error',
      message: '修改失败!'
    })
  }
}

// 取消
const cancellation = () => {
  console.log('查询------->')
  fromVisible.value = false
}

// 关闭弹框
const closeDialog = () => {
  formData.name = ''
  formData.code = ''
  formData.portNmae = ''
  formData.isAvailable = ''
  formData.desc = ''
}
</script>

<template>
  <div class="device-type-main-box">
    <div
      class="add-port-btn custom-button"
      @click="showDialog(0)"
    >
      增加设备类型
    </div>
    <div class="table-box">
      <DeviceTypeTable
        ref="deviceTypeTableRef"
        :show-dialog="showDialog"
      />
    </div>
    <div class="dialog-box">
      <el-dialog
        v-model="fromVisible"
        width="960"
        :title="isUpdate ? '修改设备类型信息' : '增加设备类型'"
        @close="closeDialog"
      >
        <template #default>
          <div class="form-box">
            <el-form
              class="formStyle"
              :model="formData"
              :rules="rules"
              label-width="130px"
            >
              <el-form-item
                label="名称:"
                prop="name"
              >
                <el-input v-model="formData.name" />
              </el-form-item>

              <el-form-item
                label="编号:"
                prop="code"
              >
                <el-input
                  v-model="formData.code"
                  :disabled="isUpdate"
                />
              </el-form-item>
              <el-form-item
                label="简称:"
                prop="noAvailableInfo"
              >
                <el-input
                  v-model="formData.shortName"
                />
              </el-form-item>
              <el-form-item
                label="描述:"
                prop="noAvailableInfo"
              >
                <el-input v-model="formData.desc" />
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancellation">
            取 消
          </el-button>
          <el-button @click="determine">
            确 定
          </el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang=scss>
.device-type-main-box {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  background-color: #fff;

  .add-port-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 40px;
    margin-left: 15px;
  }

  .table-box {
    width: 100%;
    height: 100%;
    margin-top: 15px;
    padding: 0 15px;

    /* border: 1px solid red; */
  }
}
</style>
<style lang="scss">
.form-box {
  padding-right: 5%;

  /* border: 1px solid red; */
}

.device-type-select {
  width: 100%;
}
</style>